<template>
	<view class="serve-wrapp">
		<view class="header">
			<view class="header-top flex">
				<view class="left">
					<view class="avater">
						<u--image :showLoading="true" :src="src" width="125" height="125" shape="circle"></u--image>
					</view>
				</view>
				<view class="right">
					<view class="name">
						李大文
					</view>
					<view class="phone">
						13800138000
					</view>
				</view>
				<view class="btn flex" @click="sign">
					<u-icon name="edit-pen-fill" size="32" color="#fff"></u-icon> 签到
				</view>
			</view>
			<view class="header-bottom flex">
				<view class="item" v-for="(item,index) in topList" :key="index">
					<view class="num">
						{{item.num}}
					</view>
					<view class="sub">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="invitation">
			<u--image :showLoading="true" src="/static/my/yao.jpg" width="705rpx" height="197rpx" @click="navTo('/pages/invite/index')"></u--image>
		</view>
		<view class="serve-menu" v-for="(item,index) in menuList" :key="index">
			<view class="title">
				{{item.title}}
			</view>
			<view class="sum flex">
				<view class="item flex" v-for="(itex,indx) in item.list" :key="indx" @click="navTo(itex.url)">
					<image :src="itex.img" mode=""></image>
					<text class="sub">{{itex.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				topList: [
					{
						num: 260,
						title: '累计现金'
					},
					{
						num: 0,
						title: '我的邀约报名'
					},
					{
						num: 3,
						title: '我的分享'
					},
				],
				menuList: [
					{
						title: "个人业务",
						list: [
							{
								img: '../../static/my/icon.png',
								title: '我的订单',
								url: ''
							},
							{
								img: '../../static/my/icon2.png',
								title: '我的班主任',
								url: ''
							},
							{
								img: '../../static/my/icon3.png',
								title: '我的积分',
								url: '/pages/integral/index'
							},
							{
								img: '../../static/my/icon4.png',
								title: '我的邀约见证',
								url: '/pages/invite/my'
							},
							{
								img: '../../static/my/icon5.png',
								title: '博学课堂',
								url: ''
							},
							{
								img: '../../static/my/icon6.png',
								title: '邀请排行榜',
								url: ''
							},
							{
								img: '../../static/my/icon7.png',
								title: '邀约有礼',
								url: '/pages/invite/index'
							}
						]
					},
					{
						title: "其它业务",
						list: [
							{
								img: '../../static/my/icon8.png',
								title: 'App下载',
								url: ''
							},
							{
								img: '../../static/my/icon9.png',
								title: '在线留言',
								url: ''
							},
							{
								img: '../../static/my/icon10.png',
								title: '商城兑换',
								url: ''
							},
							{
								img: '../../static/my/icon11.png',
								title: '关于博学',
								url: '/pages/about/about'
							}
						]
					}
				]
			}
		},
		onLoad() {
			this.getMyOrder()
		},
		methods: {
			navTo(url) {
				console.log(url)
				if (url) {
					uni.navigateTo({ url });
				}
			},
			getMyOrder: async function() {
				// let res = await this.$api.getYear();
				// console.log(res)
			},
			sign() {
				this.$u.toast("签到成功");
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
	}
	.serve {
		&-wrapp {
			padding: 32rpx;
			.header {
				
				padding: 32rpx;
				background-color: #fff;
				border-radius: 20rpx;
				&-top {
					align-items: center;
					position: relative;
					.right {
						margin-left: 32rpx;
						.name {
							font-size: 32rpx;
							font-weight: 700;
						}
						.phone {
							color: #BBBBBB;
							font-size: 24rpx;
							padding: 10rpx 0;
						}
					}
					.btn {
						background-image: linear-gradient(180deg,#FE7C00,#FD5902,#FD5902);
						padding: 16rpx 32rpx;
						color: #fff;
						border-radius: 100rpx;
						position: absolute;
						right: 0;
						font-size: 24rpx;
						
					}
				}
				&-bottom {
					justify-content: center;
					padding-top: 48rpx;
					.item {
						flex: 1;
						text-align: center;
						.num {
							font-weight: 700;
							margin-bottom: 10rpx;
							font-size: 32rpx;
						}
						.sub {
							color: #929292;
							font-size: 30rpx;
						}
					}
				}
			}
			.invitation {
				padding: 32rpx 0;
			}
		}
		&-menu {
			padding: 32rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
			color: #333;
			image{
				width: 66rpx;
				height: 66rpx;
			}
			.title {
				border-bottom: 1rpx solid #eee;
				padding: 0 0 32rpx 0;
			}
			.sum {
				flex-wrap: wrap;
				.item {
					width: 25%;
					flex-direction: column;
					align-items: center;
					padding: 32rpx 0;
					.sub {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
			}
		}

	}
</style>
